<template>
  <div>
    <ElDrawer v-model="visible">
      <ElBreadcrumb separator="/">
        <ElBreadcrumbItem>当前：</ElBreadcrumbItem>
        <ElBreadcrumbItem>区域管理</ElBreadcrumbItem>
        <ElBreadcrumbItem>编辑</ElBreadcrumbItem>
      </ElBreadcrumb>
      <div style="margin-top: 10px">
        <ElButton @click="addcity()" type="success">添加新的城市</ElButton>
        <ElButton @click="modify()" type="primary" style="margin-left: 20px">确定</ElButton>
        <ElForm style="margin-top: 10px">
          <ElFormItem label="区域"
            ><ElInput v-model="ModifyCondition.areaName"></ElInput>
          </ElFormItem>
          <ElFormItem label="" v-for="(e, i) in citys" :key="i"
            ><ElCard style="width: 600px"
              ><ElButton @click="delCity(i)" type="danger" size="small">删除城市</ElButton
              ><ElButton @click="addAddress(i, e.cityName)" type="success" size="small"
                >新增地址</ElButton
              >
              <br /><span>城市{{ i + 1 }}:</span
              >   <ElSelect v-model="e.cityName">
              <ElOption
                v-for="(x, i) in mcity"
                :key="i"
                :label="x.name"
                :value="x.name"
              ></ElOption> </ElSelect
            ><br />
              <template v-for="(e1, i1) in e.address" :key="i1"
                >地址{{ i1 + 1 }}:<ElInput v-model="e1.addressName" style="width: 350px"></ElInput
                ><ElButton
                  @click="delAddress(i, i1)"
                  size="small"
                  style="margin-left: 5px"
                  type="danger"
                  >删除</ElButton
                ><br /></template
            ></ElCard>
          </ElFormItem>
        </ElForm></div
    ></ElDrawer>
  </div>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from

export default {
  name: 'AreaInsert',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      ModifyCondition: {
        areaCode: '',
        areaName: '',
        address: [] as Array<any>
      },
      citys: [] as Array<any>,
      code: '',
      getCondition: {
        address: [] as Array<any>,
        areaCode: '',
        areaName: '',
        createTime: ''
      },
      visible: false,
      mcity:[] as Array<any>,
    }
  },
  computed: {
    /* sampleC() {
        return this.sampleD + "--";
      }, */
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
    addcity() {
      const newCity = {
        cityName: '',
        address: []
      }
      this.citys.push(newCity)
    },
    delCity(i: number) {
      this.citys.splice(i, 1)
    },
    addAddress(i: number, city: string) {
      const newAddress = { addressCode: 'a', addressName: '', cityName: city, addressFk: '' }
      this.citys[i].address.push(newAddress)
    },
    delAddress(i: number, i1: number) {
      this.citys[i].address.splice(i1, 1)
    },
    CopyAddress() {
      const cities: any = []
      this.citys.forEach((e) => {
        e.address.forEach((x: any) => {
          x.cityName = e.cityName
          cities.push(x)
        })
      })
      this.ModifyCondition.address = cities
    },
    async modify() {
      this.CopyAddress()
      await axios({
        method: 'PUT',
        url: 'http://127.0.0.1:7003/Area/modify/' + this.code,
        data: this.ModifyCondition
      }).then(
        (res) => {
            ElMessage.success('修改成功')
            this.visible = false
          this.$emit('areaPut')
          console.log(res.data)
        },
        (error) => {
          console.log(error.response.data)
          ElMessage.warning(error.response.data)
          
        }
      )
    },
    async find(code: string) {
      await axios({
        method: 'GET',
        url: 'http://127.0.0.1:7003/Area/find/' + code
      }).then(
        (res) => {
          this.getCondition = res.data
          console.log(res.data)
          this.printc()
        },
        (error) => {
          console.log(error.response.data)
        }
      )
    },
    open(id: string) {
      this.code = id
      this.citys = []
      this.getCondition = {
        address: [] as Array<any>,
        areaCode: '',
        areaName: '',
        createTime: ''
      }
      this.ModifyCondition = {
        areaCode: '',
        areaName: '',
        address: [] as Array<any>
      }
      this.find(this.code)
      this.visible = true
    },
    printc() {
      this.ModifyCondition.areaName = this.getCondition.areaName
      const citynames: Array<string> = []
      this.deWeight(this.getCondition.address).forEach((e: any) => {
        citynames.push(e.cityName)
      })
      citynames.forEach((e) => {
        const newCity = {
          cityName: e,
          address: []
        }
        this.getCondition.address.forEach((x) => {
          if (x.cityName === e) {
            newCity.address.push(x)
          }
        })
        this.citys.push(newCity)
      })
    },
    deWeight(arr: any) {
      var temp: any = []
      arr.forEach(function (a: any) {
        var check = temp.every(function (b: any) {
          return a.cityName !== b.cityName
        })
        check ? temp.push(a) : ''
      })
      return temp
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
}
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
